import React, { useEffect, useState} from 'react'
import { Row, Col, Avatar, Button, Affix, Tag, BackTop, Statistic, Spin, Typography} from 'antd'
import Header from '@/components/header/header'
import { useRouter } from 'next/router'
import {dateConversion, transformTime, storage} from '@/utils/utils'
import articlesModel from 'pages/model/articles'
import  ArticleComment  from '@/components/article-comment/article-comment'
import { HeartTwoTone, LikeOutlined, RocketOutlined } from '@ant-design/icons'
import  {marked}  from 'marked'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import hljs from 'highlight.js'

import styles from '../../styles/articles-detail.module.scss'
import 'highlight.js/styles/monokai-sublime.css'
// import Tocify from '@/components/tocify'
const { Title } = Typography
function ContentList () { 
  
  const router = useRouter()
  const [listData, setListData] = useState(null)
  const [html, setHtml] = useState()
  const { id } = router.query

  useEffect(() => {
    if (id) {
      articlesModel.getArticleDetail({
        data: {
          id
        }
      }).then(({datas}) => {
        if (datas) {
          setListData(datas)
          setHtml(marked(datas.content))
        }
      })
    }
  }, [id])

  // const tocify = new Tocify()
  // const rendererMD = new marked.Renderer()
  // rendererMD.heading = function (text, level, raw) {
  //   const anchor = tocify.add(text, level)
  //   console.log(`<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`)
  //   return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`
  // }

  marked.setOptions({
    // renderer: rendererMD,
    gfm: true, // 类似GitHub渲染
    pedantic: false, // 是否排除
    sanitize: false, // 是否对视频进行渲染
    tables: true,
    breaks: false,
    smartLists: true,
    highlight: (code) => hljs.highlightAuto(code).value
  })

  // useEffect(() => {
  //   let agent = navigator.userAgent
  //   if ((/.*Firefox.*/u).test(agent)) {
  //     document.addEventListener('DOMMouseScroll', function (e) {
  //       e = e || window.event
  //       let {detail} = e
  //       if (detail > 0) {
  //         console.log('鼠标向下滚动')
  //       } else {
  //         console.warn('鼠标向上滚动')
  //       }
  //     })
  //   } 
  // }, [])
  const backTop = {
    height: 40,
    width: 40,
    lineHeight: '40px',
    borderRadius: 4,
    backgroundColor: '#1f1f1f',
    color: '#fff',
    textAlign: 'center',
    fontSize: 25,
  }

  return (
    <div className={styles.container}>
      <Header type="articles" />
      {
        listData ? <Row justify="center" className={styles.content}>
          <Col xs={24} sm={24} md={16} lg={12} xl={12} className={styles.left} id="articles_content">
            <div className={styles.articles_title}>
              <Title level={1}>{listData.title}</Title>
            </div>
            <div className={styles.articles_head} style={{marginBottom: 25}}>
              <div className={styles.title_left}>
                <Avatar src={listData.avatar} size="large"> </Avatar>
                <div className={styles.text}>
                  <p className={styles.username}>{listData.username}</p>
                  <p><span>{dateConversion(transformTime(listData.createOn))}</span><span> 点赞 <span>{listData.likeCounts}</span></span></p>
                </div>
              </div>
              {
                (JSON.parse(storage.get('next_blog_userInfo'))?.id === listData.userId) ?
                  <Button type="primary" className="articles-btn" ghost>我的主页</Button>
                  :
                  <Button type="primary" className="articles-btn" ghost>关注</Button>
              }
              
            </div>
            {/* {
              listData.coverUrl &&  <div className={styles.articles_coverUrl}>
                <img src={listData.coverUrl} ></img>
              </div>
            } */}
            <div className={styles.articles_content} dangerouslySetInnerHTML = {{ __html: html }}>
            </div>
            <div className="articles-footer">
              <div className="footer-categories">
                <p>文章标签<span className="categories">
                  {
                    listData.categoriesList.length && listData.categoriesList.map(item => <Tag color="magenta" key={item.id} >{item.tagName}</Tag>)
                  }
                </span></p>
              </div>
            </div>
            <ArticleComment id={id} userId={listData.userId} />
          </Col>
          <Col  className={styles.right} id="articles-right">
            <div style={{background: '#fff'}} className="about">
              <div className={styles.title}>
                <span>关于作者</span>
              </div>
              <div className={styles.content}>
                <Avatar src={listData.avatar} size={55}> </Avatar>
                <div className={styles.text}>
                  <p className={styles.username}>{listData.username}</p>
                  <p>{listData.job} {listData.city}</p>
                </div>
              </div>
              <div className={styles.iconBox}>
                <div className={styles.article_num}><span className={styles.icon}><LikeOutlined style={{color: '#1890ff'}} /></span>获得点赞 <span>      <Statistic  valueStyle={{fontSize: '20px', fontWeight: 500, marginLeft: '1rem'}} value={listData.likeCounts} /></span> </div>
                <div className={styles.article_num}><span className={styles.icon}><HeartTwoTone /></span>文章被收藏 <span><Statistic  valueStyle={{fontSize: '20px', fontWeight: 500, marginLeft: '1rem'}} value={listData.collectCounts} /></span> </div>
              </div>
            </div>
            <Affix offsetTop={10} >
              <div className={styles.detailed_nav}>
                <div className={styles.nav_title}>文章目录</div>
                <div className="toc-list">
                  <MarkNav
                    className={styles.article_menu}
                    source={listData.content}
                    ordered={false}
                  />
                </div>
              </div>
            </Affix>
          </Col>
        </Row> 
          :
          <Spin style={{ position: 'absolute', left: '50%', top: '50%' }}></Spin>
      }
      
      <BackTop>
        <div 
          style={backTop}><RocketOutlined /></div>
      </BackTop>
    </div>
  )
}

export default ContentList